@extends("admin.layout.main")

@section("content")

    <div id="app" style="background-color: white;">


        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <template>
                    <radio-group v-model="time_type" @on-change="selectTime">
                        <Radio label="本月"></Radio>
                        <Radio label="上月"></Radio>
                        <Radio label="昨日"></Radio>
                    </radio-group>

                </template>

                <span>
                    开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 120px"
                    @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 120px"
                    @on-change="dateEndFormat">
                    </date-picker>
                </span>

                <span style="padding-left: 10px">
                      <i-button  type="primary" @click="search">时间段查询</i-button>
                </span>

            </i-col>
        </Row>


        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px;">
                <div style="width: 100%;height: 400px;margin: 100px 20px 50px 20px;" v-for="(chart,index) in data">
                    <div :id=["order_chart_"+index] style="width: 100%;height:400px;"></div>
                </div>
            </i-col>
        </Row>




    </div>

    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script  src="/echarts/echarts.min.js"></script>
    <script  src="/date/date.js"></script>
    <script>

        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    time_type: '本月',
                    token: '',
                    data:[],
                    start_time:'',
                    end_time:'',
                    defaultStartTime:'',
                    defaultEndTime:'',
                    total_count_amount:0,
                    total_count_profit:0,
                    total_count_cost:0
                }
            },
            mounted(){
                this.orderCount();
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                orderCount(){
                    axios.post("/api/order/count",{
                        start_time:this.start_time,
                        end_time: this.end_time,

                    })
                    .then(function (response) {
                        vm.data =   response.data.result;
                        vm.createChart();
                        vm.$Message.success('正在加载，请稍等。。。');

                    })
                },
                selectTime(){
                    if(this.time_type   ==  '本月'){

                        this.start_time = getMonthStartDate();
                        this.end_time = getMonthEndDate();

                    }else if(this.time_type   ==  '上月'){

                        this.start_time = getLastMonthStartDate();
                        this.end_time = getLastMonthEndDate();
                    }else if(this.time_type   ==  '昨日'){

                        this.start_time = getLastDayStartDate();
                        this.end_time = getLastDayEndDate();

                    }
                    this.orderCount();//加载查询
                },
                dateStartFormat(f,v){   //时间控件
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){ //时间控件
                    this.defaultEndTime = f;
                },
                search(){
                    if(this.defaultStartTime.length > 0 && this.defaultEndTime.length > 0){
                        this.start_time =   this.defaultStartTime;
                        this.end_time   =   this.defaultEndTime;
                        this.orderCount();
                    }else{
                        this.$Message.error('请选择日期');
                        return ;
                    }

                },
                createChart(){

                    setTimeout(function(){
                        for(let i=0;i<vm.data.length;i++){
                            let data            =  vm.data[i];
                            let total_amount    =   [];
                            let all_profit      =   [];
                            let all_cost        =   [];
                            let date            =   [];
                            let total_count_amount  =   0;
                            let total_count_profit  =   0;
                            let total_count_cost    =   0;
                            for(let j=0;j<data.length;j++){
                                total_amount.push(data[j].total_amount);
                                all_profit.push(data[j].all_profit);
                                all_cost.push(data[j].all_cost);
                                date.push(data[j].time);
                                total_count_amount  += parseFloat(data[j].total_amount);
                                total_count_profit  += parseFloat(data[j].all_profit);
                                total_count_cost    += parseFloat(data[j].all_cost);
                            }
                            vm.chartData(date,total_amount,all_profit,all_cost,i,data[0].liver,total_count_amount,total_count_profit,total_count_cost);

                        }
                    },1000);

                },
                chartData(date_list,total_amount,all_profit,all_cost,num,liver,total_count_amount,total_count_profit,total_count_cost){

                    let id  =   'order_chart_'+num;
                    let index = echarts.init(document.getElementById(id));

                    let option = {
                        title: {
                            text: liver,
                            subtext:'总营业额：'+total_count_amount.toFixed(2)+' 总成本：'+total_count_cost.toFixed(2)+' 总利润：'+total_count_profit.toFixed(2)
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['主播总营业额','总成本','利润']
                        },
                        grid: {
                            top:'20%',
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: date_list
                        },
                        yAxis: [
                            {
                                name: '值',
                                type: 'value'
                            },
                            {
                                name:'',
                                type: 'value'
                            },
                            {
                                name:'',
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name:'主播总营业额',
                                type:'line',
                                data:total_amount,
                                yAxisIndex:0,
                                markPoint : {
                                    data : [
                                        {type : "max" , name: '最大值',color:"#188df0"},
                                        {type : "min" , name: '最小值',color:"#dad8d8"}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : "average" , name: '平均值'}
                                    ]
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#188df0'
                                    },
                                    emphasis: {
                                        color: '#188df0'
                                    }
                                }
                            },
                            {
                                name:'总成本',
                                type:'line',
                                data:all_cost,
                                yAxisIndex:0,
                                markPoint : {
                                    data : [
                                        {type : "max" , name: '最大值',color:"red"},
                                        {type : "min" , name: '最小值',color:"#dad8d8"}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : "average" , name: '平均值'}
                                    ]
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'red'
                                    },
                                    emphasis: {
                                        color: 'red'
                                    }
                                }
                            },
                            {
                                name:'利润',
                                type:'line',
                                data:all_profit,
                                yAxisIndex:0,
                                markPoint : {
                                    data : [
                                        {type : "max" , name: '最大值',color:"green"},
                                        {type : "min" , name: '最小值',color:"#dad8d8"}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : "average" , name: '平均值'}
                                    ]
                                },
                                itemStyle: {
                                    normal: {
                                        color: 'green'
                                    },
                                    emphasis: {
                                        color: 'green'
                                    }
                                }
                            }
                        ]
                    };
                    index.setOption(option);
                }
            }
        });

    </script>


@endsection